<template>
  <div class="category-item">
    <div class="item-img">
      <img :src="item.bigImageUrl" alt="" />
    </div>
    <div class="item-deteils">
      <div class="title">{{ item.spuName }}</div>
      <div class="name">
        {{ item.saleVolume | Title | TitleADD }} {{ item.sellStatus | TitleA }}
      </div>
      <div class="price-num">
        <div class="price">
          {{ item.originPrice | price }}
        </div>
        <div class="num">
          <div
            :style="{
              visibility:
                item.count == 0 || typeof item.count != 'number'
                  ? 'hidden'
                  : 'visible',
            }"
            @click="Minus(item)"
          >
            -
          </div>
          <div
            :style="{
              visibility:
                item.count == 0 || typeof item.count != 'number'
                  ? 'hidden'
                  : 'visible',
            }"
          >
            {{ item.count }}
          </div>
          <div @click="AddCart(item)">+</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    item: Object,
  },
  data() {
    return {};
  },
  //事件处理器
  methods: {
    AddCart(item) {
      this.$store.dispatch("AddCart", item);
      //   console.log(this.item);
    },
    Minus(item) {
      this.$store.dispatch("Minus", item);
    },
  },
  filters: {
    Title(value) {
      return "月售" + value;
    },
    TitleADD(value) {
      return value + "+";
    },
    TitleA(value) {
      return "赞" + value;
    },
    price(value) {
      return "￥" + value;
    },
  },
  // 计算属性
  computed: {},
  //侦听器
  watch: {},
  //生命周期 - 创建完成（访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（访问DOM元素）
  mounted() {},
};
</script>
<style scoped>
/* @import url(); 引入css类 */

.category-item {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 1.25rem;
}
.item-img {
  width: 25%;
  padding-right: 2%;
}
.item-img img {
  width: 100%;
}
.item-deteils {
  width: 73%;
}
.title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 16px;
  color: #333333;
  font-weight: bold;
  font-family: "PingFangSC-Medium", "Hiragino Sans GB", Arial, Helvetica,
    "\5B8B\4F53", sans-serif;
  line-height: 22.5px;
  margin-bottom: 2px;
}
.name {
  margin-bottom: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 15px;
  font-size: 11px;
  color: #666666;
  word-break: break-all;
}
.price-num {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.price {
  height: 21.5px;
  line-height: 21.5px;
  display: inline-block;
  color: #fb4e44;
  font-size: 18px;
  font-family: "PingFangSC-Medium", "Hiragino Sans GB", Arial, Helvetica,
    "\5B8B\4F53", sans-serif;
  vertical-align: middle;
}
.num {
  width: 40%;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.num div:nth-child(1) {
  width: 1.5rem;
  height: 1.5rem;
  border: 1px solid #ccc;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
}
/* .num div:nth-child(2) {
  visibility: hidden;
} */
.num div:nth-child(3) {
  width: 1.5rem;
  height: 1.5rem;
  border: 1px solid #ffcc52;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  background: #ffcc52;
}
</style>
